// 1 写功能 ajax异步请求4步
// 2 写空函数 get 
// 3 将1放到2中
// 4 微调  4个形参 最后两个回调函数



/**
 * 发送GET请求
 * 技术栈：function + ajax + callback
 * @param {String} url 请求地址 
 * @param {String} params 请求参数   格式：参数名=值&....&参数名=值
 * @param {Function} callback  回调函数
 * @param {Function} headersFn 自定义请求头
 * @return undefined
 */
function get(url, params, callback, headersFn = null)
{
    // 一、 创建xhr对象
    const xhr = new XMLHttpRequest
    // 二、 监听请求状态
    xhr.onreadystatechange = function() 
    {
        // 判断后端返回数据后再处理
        if (xhr.readyState === 4)
        {
            // 判断返回的状态200成功在处理
            if (xhr.status === 200)
            {
                // 获取数据
                let res = JSON.parse(xhr.responseText)
                // 不同逻辑处理
                callback(res)
            } else {
                console.log('请求失败：', xhr.status);
            }
        }
    }
    // 三、 设置请求方式，请求地址
    // xhr.open('get', `请求地址?请求参数`)
    xhr.open('get', `${url}?${params}`)

    if (headersFn) headersFn(xhr)
    
    // 四、 发送
    xhr.send(null)
}


/**
 * 发送POST请求
 * 技术栈：function + ajax + callback
 * @param {String} url 请求地址 
 * @param {String} params 请求参数   格式：参数名=值&....&参数名=值
 * @param {Function} callback  回调函数
 * @param {Function} headersFn 自定义请求头
 * @return undefined
 */
 function post(url, params, callback, headersFn = null)
 {
     // 一、 创建xhr对象
     const xhr = new XMLHttpRequest
     // 二、 监听请求状态
     xhr.onreadystatechange = function() 
     {
         // 判断后端返回数据后再处理
         if (xhr.readyState === 4)
         {
             // 判断返回的状态200成功在处理
             if (xhr.status === 200)
             {
                 // 获取数据
                 let res = JSON.parse(xhr.responseText)
                 // 不同逻辑处理
                 callback(res)
             } else {
                 console.log('请求失败：', xhr.status);
             }
         }
     }
     // 三、 设置请求方式，请求地址
     // xhr.open('post', `请求地址`)
     xhr.open('post', url)
 
     xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
     if (headersFn) headersFn(xhr)
     
     // 四、 发送
     xhr.send(params)
 }



/*


// 一、 创建xhr对象
const xhr = new XMLHttpRequest
// 二、 监听请求状态
xhr.onreadystatechange = function() 
{
    // 判断后端返回数据后再处理
    if (xhr.readyState === 4)
    {
        // 判断返回的状态200成功在处理
        if (xhr.status === 200)
        {
            // 获取数据
            let res = JSON.parse(xhr.responseText)
            // 不同逻辑处理
        } else {
            console.log('请求失败：', xhr.status);
        }
    }
}
// 三、 设置请求方式，请求地址
xhr.open('get', `请求地址?请求参数`)
// 四、 发送
xhr.send(null)


*/